<template>
  <div class="loginBox">
    <h2 class="title">商城后台管理系统</h2>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <h3 style="margin-bottom: 20px">注册</h3>
      <el-form-item label="用户">
        <el-radio-group v-model="radio" size="large">
          <el-radio-button label="商家" />
          <el-radio-button label="管理员" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="确认密码" prop="passwordCon">
        <el-input v-model="ruleForm.passwordCon" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话号码" prop="tel">
        <el-input v-model="ruleForm.tel" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <span class="tap" @click="toLogin">已有账号？立即登录</span>
      </el-form-item>
      <el-form-item>
        <el-button class="loginBtn" type="primary" @click="submitForm(ruleFormRef)"
          >注册</el-button
        >
        <el-button class="loginBtn" @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from "vue";
import { Registerdata } from "../Type/login";
import { register } from "../request/api";
import { ElMessage, FormInstance } from "element-plus";
import { useRouter } from "vue-router";

export default {
  setup() {
    const radio = ref("商家");
    const data = reactive(new Registerdata());
    const rules = {
      username: [
        {
          required: true,
          message: "请输入你的账号",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入你的密码",
          trigger: "blur",
        },
      ],
      passwordCon: [
        {
          required: true,
          message: "请输入你的密码",
          trigger: "blur",
        },
      ],
      tel: [
        {
          required: true,
          message: "请输入你的电话号码",
          trigger: "blur",
        },
        {
          min: 11,
          max: 11,
          message: "长度11",
          trigger: "blur",
        },
      ],
    };
    // 注册
    const router = useRouter();
    const toLogin = () => {
      router.push("/login");
    };
    const ruleFormRef = ref<FormInstance>();
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      // 对表单内容进行验证
      // valid属于boolean类型，为true验证成功

      console.log(data);

      formEl.validate((valid) => {
        console.log(valid);
        data.ruleForm.role = radio.value === "商家" ? 0 : 1;
        if (valid) {
          register(data.ruleForm).then((res) => {
            if (res.data.code == 404) {
              ElMessage(res.data.msg);
            } else {
              // 将token进行保存
              localStorage.setItem("token", res.data.token);
              // 跳转页面，首页
              ElMessage.success("注册成功");
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    };

    // 重置
    const resetForm = () => {
      data.ruleForm.username = "";
      data.ruleForm.password = "";
      data.ruleForm.passwordCon = "";
      data.ruleForm.tel = "";
    };
    return {
      ...toRefs(data),
      rules,
      ruleFormRef,
      submitForm,
      resetForm,
      radio,
      toLogin,
    };
  },
};
</script>

<style lang="scss" scoped>
@import url("../style/common.scss");
.demo-ruleForm {
  width: 500px;
  margin: 200px auto;
  background-color: rgba($color: white, $alpha: 0.3);
  padding: 30px;
  border-radius: 40px;
}
</style>
<style>
.el-form-item__label {
  color: black;
}
</style>
